<template>
	<view class="login">
		<!-- #ifdef MP-WEIXIN -->
		<view class="mpwx-login flex-col col-center row-center">
			<view class="avatar">
				<open-data type="userAvatarUrl"></open-data>
			</view>
			<view class="user-name mt20">
				<open-data type="userNickName"></open-data>
			</view>
			<button size="lg" class="white br60 flex row-center btn" @click="mnpLoginFun">
				<text>手机快捷登录</text>
			</button>
			<view class="muted m-t-10">快捷登录后才可进行更多操作哦</view>
		</view>
		<mplogin-popup :sid="sid" v-model="showLoginPop" :logo="appConfig.shop_login_logo" :title="appConfig.name"
			:login-data="loginData" @close="closePopup" @update="handleSubmitInfo" />
		<!--  #endif -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";
	import {
		accountLogin,
		codeLogin,
		sendSms,
		wxpLogin,
		smsCodeLogin,
		opLogin,
		authLogin,
		updateUser,
		getConfig
	} from "@/api/app";
	import {
		bindSuperior
	} from "@/api/user";
	import wechath5 from "@/utils/wechath5";
	import {
		isWeixinClient,
		currentPage,
		client,
		trottle
	} from "@/utils/tools";
	import {
		SMSType
	} from "@/utils/type";
	import Cache from "@/utils/cache";
	import {
		BACK_URL,
		INVITE_CODE,
		DISTRIBUTION,
		DISTRIBUTIONID,
		SID
	} from "@/config/cachekey";
	import {
		getWxCode,
		getUserProfile
	} from "@/utils/login";
	const loginType = {
		ACCOUNT_LOGIN: 0,
		SMS_CODE_LOGIN: 1,
	};
	export default {
		data() {
			return {
				password: "",
				mobile: "",
				code: "",
				isWeixin: "",
				loginType: 0,
				smsCode: "",
				codeTips: "",
				telephone: "",
				text: "",
				showLoginPop: false,
				loginData: {},
				userLoginType: 0,
				imgUrl:`${this.$imgUrl}/wechat`
			};
		},

		async onLoad(option) {
			this.mnpLoginFun = trottle(this.mnpLoginFun);
			this.appWxLogin = trottle(this.appWxLogin);
			this.getCodeUrl = trottle(this.getCodeUrl);
			this.getuserLoginType();
			// H5微信登录
			// #ifdef H5
			this.oaAutoLogin();
			// #endif
		},
		onUnload() {},
		methods: {
			...mapMutations(["login",'setConfig','setNavigationMenu','setConfigCode']),
			...mapActions(["getUser"]),
			getuserLoginType() {
				this.userLoginType = this.appConfig.invite.user_login_type
			},
			codeChange(tip) {
				this.codeTips = tip;
			},
			getCodeUrl() {
				wechath5.getWxUrl();
			},
			// 公众号微信登录
			async oaLogin(code) {
				const data = await wechath5.authLogin(code);
				this.loginHandle(data);
			},
			// 小程序登录
			async mnpLoginFun() {
				const {
					userInfo: {
						avatarUrl,
						nickName,
						gender
					},
				} = await getUserProfile();
				uni.showLoading({
					title: "登录中...",
					mask: true,
				});
				const wxCode = await getWxCode();
				const {
					code,
					data,
					msg
				} = await authLogin({
					code: wxCode,
					nickname: nickName,
					headimgurl: avatarUrl,
					sid: Cache.get(SID)||1,
				});
				if (code == 1) {
					this.setConfigCode(code)
					if (data.is_new_user) {
						uni.hideLoading();
						this.showLoginPop = true;
						this.loginData = data;
						this.getConfigFun()
					} else {
						this.loginHandle(data);
						this.getConfigFun()
					}
					this.setNavigationMenu(data.navigation_menu)
				} else {
					this.$toast({
						title: msg,
					});
				}
			},
			async getConfigFun() {
				const {
					code,
					data
				} = await getConfig()
				if (code == 1) {
					this.setConfig(data)
				}
			},
			// 登录结果处理
			async loginHandle(data) {
				this.login(data);
				uni.hideLoading();
				// 绑定邀请码
				const inviteCode = Cache.get(INVITE_CODE);
				if (inviteCode) {
					// bindSuperior({
					// 	code: inviteCode,
					// });
					Cache.remove(INVITE_CODE);
				}
				console.log(data);
				Cache.set(DISTRIBUTION, data.distribution);
				Cache.set(DISTRIBUTIONID, data.distribution.id);
				Cache.set(INVITE_CODE, data.distribution.invite_code);
				if (getCurrentPages().length > 1) {
					uni.navigateBack({
						success() {
							const {
								onLoad,
								options
							} = currentPage();
							onLoad && onLoad(options);
						},
					});
				} else if (Cache.get(BACK_URL)) {
					this.$Router.replace(Cache.get(BACK_URL));
				} else {
					this.$Router.pushTab("/pages/note/note");
				}
				Cache.remove(BACK_URL);
			},
			changeLoginType() {
				if (this.loginType == loginType.ACCOUNT_LOGIN) {
					this.loginType = loginType.SMS_CODE_LOGIN;
				} else if (this.loginType == loginType.SMS_CODE_LOGIN) {
					this.loginType = loginType.ACCOUNT_LOGIN;
				}
			},
			
			
			async handleSubmitInfo(e) {
				const loginData = this.loginData
				const res = await updateUser(e, loginData.token);
				if (res.code == 1) {
					this.loginHandle(loginData);
				}
			},
			closePopup() {
				this.showLoginPop = false;
			},
		},
		computed: {
			...mapGetters(["appConfig"]),
			isOaWxAutoLogin() {
				return this.appConfig.wechat_h5;
			},
			sid(){
				return Cache.get(SID)?false:true
			}
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
		text-align: center;
		padding: 0;

		.login {
			min-height: 100vh;
			display: flex;
			flex-direction: column;

			.mpwx-login {
				min-height: 0;
				flex: 1;

				.avatar {
					display: inline-block;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 1px solid #eee;
					overflow: hidden;
				}

				.user-name {
					height: 40rpx;
				}

				.image {
					width: 50rpx;
					height: 50rpx;
				}

				.btn {
					background-color: #09bb07;
					width: 580rpx;
					margin: 80rpx auto 0;
				}
			}

			.acount-login {
				padding-top: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				min-height: 0;
				flex: 1;

				.logo {
					height: 80rpx;
					margin-bottom: 50rpx;
				}

				.input {
					width: 670rpx;
					border-bottom: $-solid-border;
					margin-top: 30rpx;
				}

				.sms-btn {
					border: 1px solid $-color-primary;
					width: 176rpx;
					height: 60rpx;
					box-sizing: border-box;
				}

				.wx-login {
					margin-top: 60rpx;

					.image {
						margin-top: 40rpx;
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
	}
</style>